<script>
import logo from '../../assets/map.png'
export default {
    name: 'bdmap',
    data() {
        return {
            map: null
        }
    },
    mounted() {
        var map = new BMapGL.Map("map");
        this.map = map

        var point = new BMapGL.Point(120.27089, 30.31156);  // 创建点坐标 
        map.centerAndZoom(point, 12);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // map.setHeading(64.5);   //设置地图旋转角度
        // map.setTilt(73);       //设置地图的倾斜角度

        /*
            1.标准地图：BMAP_NORMAL_MAP
            2.地球模式：BMAP_EARTH_MAP
            3.普通卫星地图：BMAP_SATELLITE_MAP
        */
        // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

        var scaleCtrl = new BMapGL.ScaleControl({
            // offset: new BMapGL.Size(150, 55) // 设置控件的偏移位置
            anchor: BMAP_ANCHOR_TOP_RIGHT
        });  // 添加比例尺控件
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);

        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

        // 个性化地图
        // map.setMapStyleV2({
        //     styleId: 'ed6dae4833b663d7c8c85294d8a07f10'
        // });


        // var marker = new BMapGL.Marker(point);        // 创建标注   
        // map.addOverlay(marker);                     // 将标注添加到地图中


        var myIcon = new BMapGL.Icon(logo, new BMapGL.Size(35, 35));
        // 创建标注对象并添加到地图  
        var marker = new BMapGL.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
        marker.addEventListener("click", function () {
            alert("您点击了标注");
            // 弹出一个 div 将店铺信息显示出来
        });


        // 覆盖物，画线
        var polyline = new BMapGL.Polyline([
            new BMapGL.Point(120.27089, 30.31156),
            new BMapGL.Point(120.28089, 30.33156),
            new BMapGL.Point(120.29089, 30.31156),
            new BMapGL.Point(120.30089, 30.33156),
            new BMapGL.Point(120.31089, 30.31156)

        ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        map.addOverlay(polyline);
        polyline.addEventListener("click", function () {
            alert("您点击了线");
        });



        // 浏览器定位
        // var geolocation = new BMapGL.Geolocation();
        // geolocation.getCurrentPosition(function (r) {
        //     if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        //         var mk = new BMapGL.Marker(r.point);
        //         map.addOverlay(mk);
        //         map.panTo(r.point);

        //         console.log(r);
        //         alert('您的位置：' + r.point.lng + ',' + r.point.lat);
        //     }
        //     else {
        //         alert('failed' + this.getStatus());
        //     }
        // });


        // IP 定位
        // function myFun(result) {
        //     var cityName = result.name;
        //     map.setCenter(cityName);
        //     console.log(result);
        //     alert("当前定位城市:" + cityName);
        // }
        // var myCity = new BMapGL.LocalCity();
        // myCity.get(myFun);



        var geolocation = new BMapGL.Geolocation();
        // 开启SDK辅助定位
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                // console.log(r);

                // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            }
            else {
                // alert('failed' + this.getStatus());
            }
        });






    },
    methods: {
        inputChange(event) {
            // console.log(event.target.value);
            const _this = this
            var options = {
                onSearchComplete: function (results) {
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                        var s = [];
                        for (var i = 0; i < results.getCurrentNumPois(); i++) {
                            s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);

                            // console.log(results.getPoi(i).point);
                            var marker = new BMapGL.Marker(results.getPoi(i).point);        // 创建标注   
                            _this.map.addOverlay(marker);                     // 将标注添加到地图中

                        }
                        document.getElementById("r-result").innerHTML = s.join("<br/>");
                    }
                }
            };
            var local = new BMapGL.LocalSearch(this.map, options);
            // local.search(event.target.value);
            local.searchNearby(event.target.value, new BMapGL.Point(120.27089, 30.31156), 1000)


        }
    }
}
</script>
<template>
    <h2>
        百度地图
        <input type="text" @change="inputChange">
    </h2>
    <div id="map"></div>
    <div id="r-result"></div>
</template>
<style lang="scss" scoped>
#map {
    height: 350px;
}
</style>